entry {
    ui::interact-with-window {
        title: { const 'Popup Demo' },
        content: Root,
        assets: [StyleSheet],
        on-close: { Some { sys::exit 0 } }
    }
};
asset StyleSheet: AssetCSS 'assets/style.css';

function PopupRoot:
    & { close: Sync } => ui::Component
    & { close } =>
        ({ { ui::Box [] } [
            ({ ui::TextInput ('this is a popup', Blackhole) }
                with ui::Autofocus),
            { ui::Button ('Close', close) }
        ] } with { ui::InlineStyle [
            ('background','#EFEFEF'),
            ('height','100vh'),
            ('padding','4px 12px'),
            ('border','1px solid darkgray'),
            ('display','flex'),
            ('align-items','flex-start'),
            ('flex-direction','column'),
            ('row-gap','10px')
        ] });

const Root: ui::Component
    { { ui::Box [] } [
        { ui::Label 'popup demo' },
        { { ui::Box ['row'] } [
            ({ ui::Button ('Open', Noop) } with { ui::Event ('click',
                { ui::EventCallbackAsync { ui::popup {
                    size:    { w: 20, h: 10 },
                    content: & {close} => { PopupRoot {close} }
                } } }
            ) }),
            ({ ui::Button ('Open Here', Noop) } with { ui::Event ('click.rect',
                \ ui::extract-rect
                let rect := (),
                { ui::EventCallbackAsync { ui::popup {
                    ref:     { Some rect },
                    size:    { w: 15, h: 5 },
                    content: & {close} => { PopupRoot {close} }
                } } }
            ) })
        ] }
    ] };
